BizinGothic にして Codeブロック内で全角文字に色を付ける

こんな感じに見えて、ちょっとゴチャゴチャします。

https://i.gyazo.com/2324e5859180885553024c1f6d817bbe.png

全角文字ミスタイプでバグることがよくあって・・・（泣）

表示色を変えて警告することにしました。

こちらを参考にさせていただいておりましたが・・・

それでもミスしてバグるので・・・・もーいっそのこと全角は皆だぁっ！

配色は、お好みで調整して下さい。

フォントを変えます。

全角の空白文字に枠が付きます。

code:style.css

.line code {

font-family: 'Bizin Gothic', sans-serif;

font-size: 105%;

}

code:script.js

(() => { // 即時関数とやらで書くのが良いらしい？

scrapbox.on('lines:changed', twoBytesCharacterColoring);

twoBytesCharacterColoring();

function twoBytesCharacterColoring() {

if (!window.scrapbox.Page.lines) return;

const codeCharList =

document.querySelectorAll('.line span.code-block span.indent span.char-index');

for (const c of codeCharList) {

const char = c.textContent; // 文字を取得

if (char.match(/^\x01-\x7E\xA1-\xDF/)) { // 全角文字の判定

c.style.color = '#888888'; // 文字色はおとなしく

c.style.backgroundColor = '#FFF0E0'; // 背景色を設定　警告的な色

c.style.fontWeight = 'bold'; // フォントの太さを設定

c.style.letterSpacing = '0.16em'; 　　// 編集時カーソル位置不具合対策？

c.style.fontSize = '85%'; // ちょっと小さめに　

}

} // （　｛　｀　１２３　．　”　－　｜　　誤字対策！

}

})();